<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="提醒记录" name="first">
        <div class="wrapper">
          <div id="row-01" class="box">
            <FilterTable
              ref="remindTable"
              height="auto"
              columnsRef="remindTable"
              :columns="tableColumns"
              selectionType="single"
              :fetchapi="fetchApi"
              :params="fetchParams"
              :datakey="'rows'"
              :onColumnsChange="columns => (this.tableColumns = columns)"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="销售回访 DCRC回访信息 " name="second">
        <FormPanel ref="formPanel" :list="formList" :cols="3" :isSubmitBtn="false" />
        <div>
          <el-button @click="queryDCRCTable">查 询</el-button>
        </div>
        <FilterTable
          ref="DCRCTable"
          height="auto"
          columnsRef="DCRCTable"
          :columns="table1Columns"
          selectionType="single"
          :fetchapi="fetchApi1"
          :params="fetchParams1"
          :datakey="'rows'"
          :onColumnsChange="columns => (this.table1Columns = columns)"
        />

        <div
          :style="{
            position: 'absolute',
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 99,
            borderTop: '1px solid #e9e9e9',
            padding: '10px 20px',
            background: '#fff',
            textAlign: 'center'
          }"
        >
          <el-button>取 消</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { queryRemindRecord, queryDCRC } from '@/api/customerRepair/customerLoss/lossRemind';
export default {
  name: 'remindRocord',
  mixins: [dictionary],
  props: ['selectColumns'],
  data() {
    return {
      tableColumns: this.createTableList(),
      formList: this.creaFormList(),
      table1Columns: this.createDcrcTableList(),
      fetchApi: queryRemindRecord,
      fetchParams: { xhrAbort: true },
      fetchApi1: queryDCRC,
      fetchParams1: { xhrAbort: true },
      activeName: 'first'
    };
  },
  mounted() {
    console.log(this.selectColumns);
    this.queryRemindRecordTable();
  },
  methods: {
    handleClick(tab, event) {
      this.queryDCRCTable();
    },
    createTableList() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },

        {
          title: '提醒编号',
          dataIndex: 'REMIND_ID',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商编号',
          dataIndex: 'ASC_SHORTNAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主名称',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '提醒日期',
          dataIndex: 'REMIND_DATE',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '提醒方式',
          dataIndex: 'REMIND_WAY',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.REMIND_WAY, '8081')}</span>;
          }
        },
        {
          title: '提醒内容',
          dataIndex: 'REMIND_CONTENT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户反馈',
          dataIndex: 'CUSTOMER_FEEDBACK',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '提醒人',
          dataIndex: 'EMPLOYEE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '提醒状态',
          dataIndex: 'REMIND_STATUS',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.REMIND_STATUS, '8057')}</span>;
          }
        },
        {
          title: '提醒失败原因',
          dataIndex: 'REMIND_FAIL_REASON',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.REMIND_FAIL_REASON, '8069')}</span>;
          }
        },
        {
          title: '提醒类型',
          dataIndex: 'REMIND_TYPE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'REMARK ',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否续保战败',
          dataIndex: 'RENEWAL_REMIND_STATUS',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '续保战败原因',
          dataIndex: 'RENEWAL_FAILED_REASON',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '续保战败备注',
          dataIndex: 'RENEWAL_REMARK',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '续保战败日期',
          dataIndex: 'RENEWAL_FAILED_DATE',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '新车关怀日期',
          dataIndex: 'NEW_VEHICLE_DATE',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '上次预计保养里程',
          dataIndex: 'LAST_NEXT_MAINTAIN_MILEAGE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '上次预计保养日期',
          dataIndex: 'LAST_NEXT_MAINTAIN_DATE',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        }
      ];
    },
    creaFormList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '回访日期',
          fieldName: 'startDate|endDate',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    createDcrcTableList() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访编号',
          dataIndex: 'REMIND_ID',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访类型',
          dataIndex: 'description',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主客户编号',
          dataIndex: 'OWNER_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主客户姓名',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访日期',
          dataIndex: 'REMIND_DATE',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '回访内容',
          dataIndex: 'REMIND_CONTENT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访人',
          dataIndex: 'REMINDER',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '反馈信息',
          dataIndex: 'CUSTOMER_FEEDBACK',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'brand_name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'series_name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人手机',
          dataIndex: 'MOBILE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人电话',
          dataIndex: 'PHONE',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    queryRemindRecordTable() {
      let ownerNo = this.selectColumns[0].OWNER_NO;
      let vin = this.selectColumns[0].VIN;
      this.fetchParams = Object.assign({}, { ownerNo, vin }, { xhrAbort: false });
    },

    queryDCRCTable() {
      let ownerNo = this.selectColumns[0].OWNER_NO;
      let vin = this.selectColumns[0].VIN;
      this.fetchParams1 = Object.assign({}, { ownerNo, vin }, { xhrAbort: false });
    }
  }
};
</script>

<style lang="less" scoped></style>
